<template>
  <div class="login">
    <div class="login-box">
      <h1>嗨购后台管理系统</h1>
      <el-form :model="adminLogin">
        <el-form-item>
          <el-input v-model="adminLogin.adminname" clearable placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="password" v-model="adminLogin.password" clearable placeholder="密码"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="login" @keyup.enter.native="keydownEvent" >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { reactive ,onUnmounted} from "vue";
import { useRouter } from "vue-router";
import service from "../utils/service";
import "element-plus/dist/index.css";


// import type { FormInstance } from 'element-plus'
// const formRef = ref<FormInstance>()

const $router = useRouter();
//定义类型
interface Ilogin {
  adminname: string;
  password: string;
}

const adminLogin = reactive<Ilogin>({
  adminname: "",
  password: "",
});

const keydownEvent = (e:any) => {
      if(e.keyCode === 13){
        login()
      }

}

window.addEventListener("keydown",keydownEvent,true)

onUnmounted(()=>{
  window.removeEventListener("keydown",keydownEvent,true)
})



//发送请求
const login = () => {
  console.log(111);
  
  if(adminLogin.adminname === "" || adminLogin.password === ""){
    ElMessage({
      message:"请输入用户名和密码",
      type:"error"
    })
  }else(
    service({
      url: "/admin/login",
      method: "post",
      data:adminLogin
    }).then((res) => {
      if (res.data.code === "200") {
        // ElMessage({
        //   message: "登陆成功！",
        //   type: "success",
        // });
        // console.log("res.data.data.checkedkeys",res.data.data.checkedkeys);
        
        //储存用户名
        sessionStorage.setItem("username", res.data.data.adminname);
        //储存token
        sessionStorage.setItem("token", res.data.data.token);
        //储存权限
        sessionStorage.setItem("grants",JSON.stringify(res.data.data.checkedkeys))
        // console.log(sessionStorage.getItem("token"));
        $router.push("/Admin");
      } else if (res.data.code === "10003") {
        ElMessage({
          message: "密码错误！",
          type: "error",
        });
      } else if (res.data.code === "10005") {
        ElMessage({
          message: "未注册！",
          type: "error",
        });
      }
    })

  )
// if(!formEl) return
// formEl.validate() =>{  }
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url("https://img.zcool.cn/community/0135d85b7373a0a801218d321d5827.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.login-box {
  margin-top: 150px;
  margin-left: 150px;
  background-color: rgba(255, 255, 255, 0.451);
  width: 400px;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
}
.login-box h1 {
  font-size: 30px;
  text-align: center;
  color: #1a6fda;
  margin-top: 20px;
}
.el-input {
  margin: auto;
  width: 300px;
  margin-top: 30px;
}
.el-button {
  margin: auto;
  width: 300px;
  margin-top: 30px;
  background-color: #1a6fda;
  color: white;
}
</style>